Home Explore Help
Register Sign In
jamesperet
/
codex
Watch 1
Star 0
Fork 0

Browse Source
Relative image to absolute img path converter and sidebar toogle btn

James Peret 8 years ago
parent
c9eda8ecca
commit
d71ee176c7
11 changed files with 250 additions and 34 deletions
Show Diff Stats
  1. 2 0
      .gitignore
  2. 22 2
      app/index.html
  3. 6 0
      app/scripts/controllers/header-ctrl.js
  4. 138 28
      app/scripts/controllers/note-view-ctrl.js
  5. 20 0
      app/scripts/controllers/sidebar-ctrl.js
  6. 1 1
      app/views/note-view.html
  7. 2 1
      bower.json
  8. 5 0
      codex/dev/codex-app/todos.md
  9. 1 0
      codex/inbox/hgvhgc.md
  10. 11 0
      codex/index.md
  11. 42 2
      css/codex.css

+ 2 - 0
.gitignore
View File 

@@ -4,3 +4,5 @@ node_modules
4 4 
 .DS_Store
5 5
6 6 
 */.DS_Store
7 
+
8 
+codex/Research/*

+ 22 - 2
app/index.html
View File 

@@ -9,12 +9,14 @@
9 9 
     <link rel="stylesheet" href="../css/codex.css">
10 10
11 11 
     <!-- Javascript -->
12 
+    <script src="../bower_components/jquery/dist/jquery.js"></script>
12 13 
     <script src="../bower_components/ace-builds/src-min-noconflict/ace.js"></script>
13 14 
     <script src="../bower_components/angular/angular.js"></script>
14 15 
     <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
15 16 
     <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
16 17 
     <script src="../bower_components/angular-ui-ace/ui-ace.js"></script>
17 18
19 
+
18 20 
     <script src="scripts/codex-app.js"></script>
19 21 
     <script src="scripts/controllers/app-ctrl.js"></script>
20 22 
     <script src="scripts/controllers/header-ctrl.js"></script>
 
@@ -25,7 +27,7 @@
25 27 
     <script src="scripts/services/date-formatter.js" charset="utf-8"></script>
26 28
27 29 
     <script>
28 
-     var remote = require('remote');
30 
+     var remote = require('remote');
29 31 
      var dialog = remote.require('dialog');
30 32 
     </script>
31 33 
   </head>
 
@@ -36,9 +38,26 @@
36 38 
       <header class="toolbar toolbar-header" ng-controller="HeaderCtrl">
37 39 
         <h1 class="title">Codex</h1>
38 40 
         <div class="toolbar-actions">
41 
+          <button class="btn btn-default" ng-click="goToHome()">
42 
+            <span class="icon icon-home"></span>
43 
+          </button>
44 
+
45 
+          <div class="btn-group">
46 
+            <button class="btn btn-default" ng-class="noteEditBtnClass" ng-click="goBack()">
47 
+              <span class="icon icon-left"></span>
48 
+            </button>
49 
+            <button class="btn btn-default" ng-class="noteViewBtnClass" ng-click="goForward()">
50 
+              <span class="icon icon-right"></span>
51 
+            </button>
52 
+          </div>
53 
+
39 54 
           <button class="btn btn-default" ng-click="createNewNote()">
40 55 
             <span class="icon icon-plus"></span>
41 56 
           </button>
57 
+          <button class="btn btn-default" ng-click="toogleSidebar()">
58 
+            <span class="icon icon-list"></span>
59 
+          </button>
60 
+
42 61 
           <div class="btn-group pull-right">
43 62 
             <button class="btn btn-default" ng-class="noteEditBtnClass" ng-click="activateNoteEdit()">
44 63 
               <span class="icon icon-pencil"></span>
 
@@ -47,6 +66,7 @@
47 66 
               <span class="icon icon-eye"></span>
48 67 
             </button>
49 68 
           </div>
69 
+
50 70 
         </div>
51 71 
       </header>
52 72 
 
@@ -54,7 +74,7 @@
54 74 
       <!-- Your app's content goes inside .window-content -->
55 75 
       <div class="window-content" id="holder">
56 76 
         <div class="pane-group">
57 
-          <div class="pane pane-sm sidebar" ng-controller="SidebarCtrl">
77 
+          <div class="pane pane-sm sidebar" ng-controller="SidebarCtrl" ng-show="showSidebar">
58 78 
             <nav class="nav-group">
59 79 
               <h5 class="nav-group-title">My Notes</h5>
60 80 
               <span class="nav-group-item active" ng-click="goToAllNotes()">

+ 6 - 0
app/scripts/controllers/header-ctrl.js
View File 

@@ -31,6 +31,12 @@ angular.module('codexApp.header', [])
31 31 
       });
32 32 
     }
33 33
34 
+    // Toogle sidebar
35 
+
36 
+    $scope.toogleSidebar = function() {
37 
+      $rootScope.$broadcast('sidebar:toogle');
38 
+    }
39 
+
34 40 
     // Note View active button
35 41
36 42 
     $scope.activateNoteView = function() {

+ 138 - 28
app/scripts/controllers/note-view-ctrl.js
View File 

@@ -11,28 +11,40 @@ angular.module('codexApp.noteView', [])
11 11 
   .controller('NoteViewCtrl',['$scope', '$rootScope', '$state', 'FileService', function ($scope,  $rootScope, $state, FileService) {
12 12
13 13 
     var marked = require('marked');
14 
+    marked.setOptions({
15 
+      renderer: new marked.Renderer(),
16 
+      gfm: true,
17 
+      tables: true,
18 
+      breaks: false,
19 
+      pedantic: true,
20 
+      sanitize: false,
21 
+      smartLists: true,
22 
+      smartypants: true
23 
+    });
14 24 
     var filesystem = require("fs");
15 25
16 26 
     console.log('-> Note View opened!')
17 27
18 28 
     $scope.note = FileService.getCurrentNote();
19 29 
     $scope.container = "note-container";
20 
-    $scope.raw_data = "";
30 
+    $scope.html_data = "";
21 31
22 32
23 33 
     $scope.loadNoteView = function() {
24 34 
       filesystem.readFile($scope.note.path, function(err, data) {
25 
-        var str = String.fromCharCode.apply(null, data)
35 
+        $scope.note.data = String.fromCharCode.apply(null, data)
26 36 
         if(!$scope.$$phase) {
27 37 
           $scope.$apply(function(){
28 
-            $scope.note.data = str;
29 
-            $scope.raw_data = str
38 
+            $scope.html_data = marked($scope.note.data);
39 
+
30 40 
           });
31 41 
         } else {
32 
-            $scope.note.data = str;
33 
-            $scope.raw_data = str;
42 
+            $scope.html_data = marked($scope.note.data);
43 
+
34 44 
         }
45 
+
35 46 
         //console.log($scope.raw_data);
47 
+        $scope.fixImgURLs($scope.note.path, $scope.html_data);
36 48 
         var a = document.getElementsByTagName('a'), ajax;
37 49 
         for (var i=0; i<a.length; ++i) {
38 50 
            a[i].addEventListener('click', handleAnchor, false);
 
@@ -45,25 +57,10 @@ angular.module('codexApp.noteView', [])
45 57 
             }
46 58 
             if(e.srcElement.protocol == "file:"){
47 59 
               var current_note = FileService.getCurrentNote().path;
48 
-              var current_path = current_note.split('/');
49 
-              current_path.pop();
50 60 
               var relative_path = e.srcElement.outerHTML.match(/href="([^"]*)/)[1];
51 
-              relative_path = relative_path.split('/');
52 
-              var count = 0;
53 
-              for (var i = 0; i < relative_path.length; i++) {
54 
-                if(relative_path[i] == ".."){
55 
-                  count = count + 1;
56 
-                  relative_path[i] = "";
57 
-                }
58 
-              }
59 
-              relative_path = relative_path.join('/');
60 
-              for (var i = 0; i < count; i++) {
61 
-                current_path.pop();
62 
-              }
63 
-              current_path = current_path.join('/');
64 
-              current_path = current_path + relative_path
65 
-
66 
-              var note = FileService.getNote(current_path);
61 
+              var fixed_url = $scope.fixRelativeURL(current_note, relative_path);
62 
+
63 
+              var note = FileService.getNote(fixed_url);
67 64 
               FileService.setCurrentNote(note);
68 65 
               $scope.note = note;
69 66 
               console.log("-> Opening Link: " + note.path)
 
@@ -80,15 +77,128 @@ angular.module('codexApp.noteView', [])
80 77
81 78 
     $scope.loadNoteView();
82 79
83 
-    $scope.marked = function(str) {
84 
-      if(str != "" && str != undefined) {
85 
-        return marked(str);
80 
+    $scope.fixImgURLs = function(current_note_path, html){
81 
+      // var images = html.getElementsByTagName('img');
82 
+      // var srcList = [];
83 
+      // for(var i = 0; i < images.length; i++) {
84 
+      //     console.log(images[i]);
85 
+      //     images[i].src = $scope.fixRelativeURL(current_note_path, images[i].src);
86 
+      // }
87 
+      // page = angular.element(html);
88 
+      // console.log(page.find("img"))
89 
+      // page.find("img").each(function() {
90 
+      //   var obj = angular.element(this);
91 
+      //   console.log(page)
92 
+      //   console.log(obj)
93 
+      //   obj.attr('src') =  $scope.fixRelativeURL(current_note_path, obj.attr('src'));
94 
+      //   console.log(obj.attr('src'));
95 
+      // });
96 
+
97 
+      var imgs = angular.element(html).find("img");
98 
+      var img_urls = []
99 
+      for (var i = 0; i < imgs.length; i++) {
100 
+        img_urls.push($scope.fixRelativeURL(current_note_path, $scope.absoluteToRelativeURL(current_note_path, imgs[i].src)));
101 
+      }
102 
+      var page_images = document.getElementsByTagName('img');
103 
+      console.log("-> Changing "+ img_urls.length + " images")
104 
+      console.log(page_images)
105 
+      for(var i = 0; i < img_urls.length; i++) {
106 
+          console.log(page_images[i]);
107 
+          page_images[i].src = img_urls[i];
108 
+
109 
+      }
110 
+    }
111 
+
112 
+    $scope.fixRelativeURL = function(current_url, relative_url) {
113 
+      console.log("-> Fixing URL")
114 
+      console.log("   * Relative URL: " + relative_url)
115 
+      console.log("   * Note URL: " + current_url)
116 
+      // split urls and create arrays
117 
+      var current_path = current_url.split('/');
118 
+      var relative_path = relative_url.split('/');
119 
+      // remove the current note's filename from the url
120 
+      current_path.pop();
121 
+      // count how many folders the relative path goes back and erase '..'
122 
+      var count = 0;
123 
+      for (var i = 0; i < relative_path.length; i++) {
124 
+        if(relative_path[i] == ".."){
125 
+          count = count + 1;
126 
+          relative_path[i] = "";
127 
+        }
128 
+      }
129 
+      // make the relative path a string again
130 
+      relative_path = relative_path.join('/');
131 
+      // remove the same count of folders from the end of the current notes url
132 
+      for (var i = 0; i < count; i++) {
133 
+        current_path.pop();
134 
+      }
135 
+      // make the current note's url a string again
136 
+      current_path = current_path.join('/');
137 
+      // add a '/' if the relative url pointed to a file or folder above the current notes root
138 
+      if(count == 0){
139 
+        var fixed_url = current_path + "/" + relative_path;
86 140 
       } else {
87 
-        return str;
141 
+        var fixed_url = current_path + relative_path;
88 142 
       }
143 
+      // return the fixed relative url
144 
+      console.log("   * Fixed URL: " + fixed_url)
145 
+      return fixed_url;
146 
+    }
147 
+
89 148
149 
+
150 
+    $scope.absoluteToRelativeURL = function(current_url, absolute_url) {
151 
+      console.log("-> Converting absolute URL to relative")
152 
+      console.log("   * Absolute URL: " + absolute_url)
153 
+      console.log("   * Note URL: " + current_url)
154 
+      // split urls and create arrays
155 
+      var current_path = current_url.split('/');
156 
+      var absolute_path = $scope.getUrlParts(absolute_url).pathname.split('/');
157 
+      // remove the current note's filename from the url and the image filename from the url
158 
+      current_path.pop();
159 
+      current_path.shift();
160 
+      absolute_path.shift();
161 
+      // count how many folders the current path has
162 
+      var current_path_count = 0;
163 
+      for (var i = 0; i < current_path.length; i++) {
164 
+        current_path_count = current_path_count + 1;
165 
+      }
166 
+      // count how many folders the absolute path has
167 
+      var absolute_path_count = 0;
168 
+      for (var i = 0; i < absolute_path.length; i++) {
169 
+        absolute_path_count = absolute_path_count + 1;
170 
+      }
171 
+      absolute_path_count = absolute_path_count - 1;
172 
+      console.log("   * Cleaned current  URL (" + current_path_count + " parts): " + current_path.join('/'))
173 
+      console.log("   * Cleaned absolute URL (" + absolute_path_count + " parts): " + absolute_path.join('/'))
174 
+      dif = current_path_count - (absolute_path_count -1);
175 
+      for (var i = 0; i < absolute_path_count; i++) {
176 
+        absolute_path.shift();
177 
+      }
178 
+      console.log("   * Modified current  URL (" + current_path_count + " parts): " + current_path.join('/'))
179 
+      console.log("   * Modified absolute URL (" + absolute_path_count + " parts): " + absolute_path.join('/'))
180 
+      // make the relative path a string again
181 
+      var relative_path = absolute_path.join('/');
182 
+      console.log("   * Converted relative URL: " + relative_path)
183 
+      return relative_path;
90 184 
     }
91 185
92 186
93 187
188 
+    $scope.getUrlParts = function(url) {
189 
+        var a = document.createElement('a');
190 
+        a.href = url;
191 
+
192 
+        return {
193 
+            href: a.href,
194 
+            host: a.host,
195 
+            hostname: a.hostname,
196 
+            port: a.port,
197 
+            pathname: a.pathname,
198 
+            protocol: a.protocol,
199 
+            hash: a.hash,
200 
+            search: a.search
201 
+        };
202 
+    }
203 
+
94 204 
   }]);

+ 20 - 0
app/scripts/controllers/sidebar-ctrl.js
View File 

@@ -12,10 +12,30 @@ angular.module('codexApp.sidebar', [])
12 12
13 13 
     console.log('-> Sidebar loaded')
14 14
15 
+    $scope.showSidebar = true;
16 
+
15 17 
     $scope.goToAllNotes = function() {
16 18 
       $rootScope.$broadcast('main-window:note-list');
17 19 
       $rootScope.$broadcast('window-view:change');
18 20 
       $state.go("index");
19 21 
     }
20 22
23 
+    $rootScope.$on('sidebar:toogle', function() {
24 
+      if(!$scope.$$phase) {
25 
+        $scope.$apply(function(){
26 
+          $scope.toogleSidebar();
27 
+        });
28 
+      } else {
29 
+        $scope.toogleSidebar();
30 
+      }
31 
+    });
32 
+
33 
+    $scope.toogleSidebar = function() {
34 
+      if( $scope.showSidebar == true){
35 
+        $scope.showSidebar = false;
36 
+      } else {
37 
+        $scope.showSidebar = true;
38 
+      }
39 
+    }
40 
+
21 41 
   }]);

+ 1 - 1
app/views/note-view.html
View File 

@@ -1,3 +1,3 @@
1 1 
 <div class="note-container">
2 
-  <div class="note" ng-bind-html="marked(note.data)"></div>
2 
+  <div class="note" ng-bind-html="html_data"></div>
3 3 
 </div>

+ 2 - 1
bower.json
View File 

@@ -23,6 +23,7 @@
23 23 
     "angular-ui": "~0.4.0",
24 24 
     "angular-ui-router": "~0.2.15",
25 25 
     "angular-sanitize": "~1.4.7",
26 
-    "angular-ui-ace": "~0.2.3"
26 
+    "angular-ui-ace": "~0.2.3",
27 
+    "jquery": "~2.1.4"
27 28 
   }
28 29 
 }

+ 5 - 0
codex/dev/codex-app/todos.md
View File 

@@ -8,3 +8,8 @@
8 8 
 * [X] Edit and save files
9 9 
 * [X] Create new files
10 10 
 * [X] Internal links
11 
+* [X] Icon View
12 
+* [ ] Navigation History
13 
+* [ ] Note versioning
14 
+* [ ] Tags
15 
+* [ ] External Links

+ 1 - 0
codex/inbox/hgvhgc.md
View File 

@@ -0,0 +1 @@
1 
+gjcjgcghj

+ 11 - 0
codex/index.md
View File 

@@ -0,0 +1,11 @@
1 
+# Index
2 
+
3 
+#### Test Stack
4 
+
5 
+* [Test-Stack/Notebook 2/Note-0001](Test-Stack/Notebook 2/Test-0001/index.md)
6 
+* [Test-Stack/Notebook 2/Note-0002](Test-Stack/Notebook 2/Test-0001/index.md)
7 
+*
8 
+
9 
+#### Research
10 
+
11 
+* [Chem Lights](Research/ChemLights/index.md)

+ 42 - 2
css/codex.css
View File 

@@ -11,10 +11,15 @@
11 11
12 12 
 .note-container .note {
13 13 
   padding: 20px;
14 
-  padding-top: 15px;
15 14 
   border-radius: 10px;
16 15 
   background-color: white;
17 
-  margin: 25px;
16 
+  margin: 15px;
17 
+  margin-top: 10px;
18 
+  margin-right: 25px;
19 
+  font-family: helvetica;
20 
+  font-weight: 300;
21 
+  font-size: 14px;
22 
+  color: #333;
18 23 
 }
19 24
20 25 
 .ace_editor { height: 100%; }
 
@@ -27,3 +32,38 @@
27 32 
 }
28 33
29 34 
 .ace_content { cursor: text; }
35 
+
36 
+.note .xsmall {
37 
+  max-width: 150px;
38 
+}
39 
+
40 
+.note .small {
41 
+  max-width: 250px;
42 
+}
43 
+
44 
+.note .medium {
45 
+  max-width: 500px;
46 
+}
47 
+
48 
+.note .medium {
49 
+  max-width: 500px;
50 
+}
51 
+
52 
+.note .large {
53 
+  width: 650px;
54 
+}
55 
+
56 
+
57 
+.note .larger {
58 
+  width: 750px;
59 
+}
60 
+
61 
+.note .huge {
62 
+  width: 1000px;
63 
+}
64 
+
65 
+.note>h1:first-of-type {
66 
+  margin-top: 0px;
67 
+}
68 
+
69 
+.toolbar-actions .spacer { padding-left: 25px; }